<template>
    <div class="content-wrapper-view ossconfig">
		<div class="content-wrapper-body"><!-- 开始 -->
			<!-- 工具栏- -->
	        <div class="filter-wrapper">
	            <el-form ref="filterForm" :model="listQuery" :inline="true">
                    <el-form-item prop="ossName" size="medium">
	                    <el-select v-model="listQuery.ossName" @change="handleChangeSelect" placeholder="服务商" clearable style="width: 150px">
	                        <el-option
	                                v-for="item in ossNameOptions"
	                                :key="item.key"
	                                :label="item.label"
	                                :value="item.key">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
                    <el-form-item prop="bucketName" size="medium">
	                    <el-select v-model="listQuery.bucketName" placeholder="空间名" clearable style="width: 150px">
	                        <el-option
	                                v-for="item in bucketNameOptions"
	                                :key="item.key"
	                                :label="item.label"
	                                :value="item.key">
	                        </el-option>
	                    </el-select>
	                </el-form-item>
	                <el-form-item prop="fileName" size="medium">
	                    <el-input v-model="listQuery.fileName" placeholder="关键字"></el-input>
	                </el-form-item>
	
	                <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
	                <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
	                <el-button v-if="authorize('system:oss:config')" type="primary" size="medium" icon="el-icon-menu" @click="handlerOssConfig">配置OSS</el-button>
	                <el-button v-if="authorize('system:oss:delete')" type="danger" size="medium" icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
	                <el-button v-if="authorize('system:oss:upload')" type="primary" size="medium" @click="handleUpload">上传</el-button>
	            </el-form>
	        </div>
	
			<!-- 表格 -->
	        <el-table
	                :data="list"
	                border fit
	                highlight-current-row
	                v-loading="listLoading"
	                element-loading-text="给我一点时间"
	                empty-text="-"
	                @selection-change="handleSelectionChange">
	
	            <el-table-column type="selection" width="55" align="center"></el-table-column>
	            <el-table-column type="index" width="55" align="center"></el-table-column>
	
				<el-table-column label="服务商" width="100" align="center">
	                <template slot-scope="scope">
                        <span v-if="scope.row.ossName === 'qiniuyun'">七牛云</span>
                        <span v-else-if="scope.row.ossName === 'aliyun'">阿里云</span>
                        <span v-else>腾讯云</span>
                    </template>
	            </el-table-column>
				<el-table-column label="空间" width="120" align="center">
	                <template slot-scope="scope"> {{ scope.row.bucketName }}</template>
	            </el-table-column>
				<el-table-column label="文件名称" width="300" align="left">
	                <template slot-scope="scope"> {{ scope.row.fileName }}</template>
	            </el-table-column>
				<el-table-column label="文件类型" width="80" align="center">
	                <template slot-scope="scope"> {{ scope.row.fileType }}</template>
	            </el-table-column>
				<el-table-column label="文件访问URL" min-width="300" align="left" @click="handleCopy(scope.row.url, $event)">
	                <template slot-scope="scope"> 
                        <el-button size="small" icon="el-icon-mars-copy" @click="handleCopy(scope.row.url, $event)"></el-button>
                        <el-button size="small" icon="el-icon-mars-view" @click="handlerOpen(scope.row.url)">{{ scope.row.url }}</el-button>
                    </template>
	            </el-table-column>
				<el-table-column label="创建时间" align="center">
	                <template slot-scope="scope"> {{ scope.row.ctime | parseTime('{y}-{m}-{d} {h}:{i}') }}</template>
	            </el-table-column>
	            <el-table-column label="操作" width="180px" align="center">
	                <template slot-scope="scope">
	                    <el-button v-if="authorize('system:oss:update')" size="small" type="primary" icon="edit" @click="handleUpdate(scope.row)">编辑</el-button>
	                    <el-button v-if="authorize('system:oss:delete')" size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
	                </template>
	            </el-table-column>
	        </el-table>
	
			<!-- 分页工具栏 -->
	        <div v-if="!listLoading" class="pagination-container">
	            <el-pagination
                        background
	                    @size-change="handleSizeChange"
	                    @current-change="handleCurrentChange"
	                    :current-page="listQuery.page"
	                    :page-sizes="[10, 20, 30, 50]"
	                    :page-size="listQuery.limit"
	                    layout="total, sizes, prev, pager, next, jumper"
	                    :total="total">
	            </el-pagination>
	        </div>
	
			<!-- OSS配置窗口 -->
	        <el-dialog title="OSS配置" :visible.sync="dialogOssConfigVisible" @open="handleDialogOpen" @close="handleDialogClose">
	            <el-form ref="form" :model="configForm" :rules="configRules" label-width="120px">

					<el-form-item label="云服务商" prop="ossName">
                        <el-radio-group v-model="configForm.ossName" @change="handleChangeRadio">
                            <el-radio label="qiniuyun" border size="medium">七牛云</el-radio>
                            <el-radio label="aliyun" border size="medium">阿里云</el-radio>
                            <el-radio label="tengxunyun" border size="medium">腾讯云</el-radio>
                        </el-radio-group>
					</el-form-item>

                    <el-form-item label="AccessKey" prop="accessKey">
                        <el-input v-model="configForm.accessKey" placeholder="秘钥Key" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="SecretKey" prop="secretKey">
                        <el-input v-model="configForm.secretKey" placeholder="密钥Value" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="空间名称" prop="bucketName">
                        <el-input v-model="configForm.bucketName" placeholder="空间名称" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="文件前缀" prop="prefixName">
                        <el-input v-model="configForm.prefixName" placeholder="文件前缀" style="width: 80%;"></el-input>
                    </el-form-item>

                    <el-form-item label="阿里云终端" prop="aliyunEndpoint" v-if="configForm.ossName === 'aliyun'">
						<el-input v-model="configForm.aliyunEndpoint" placeholder="阿里云终端" style="width: 80%;"></el-input>
					</el-form-item>

				</el-form>
	
	            <div slot="footer" class="dialog-footer">
	                <el-button @click="cancel('form')">取 消</el-button>
	                <el-button type="primary" @click="setOssConfig('form')">确 定</el-button>
	            </div>
	        </el-dialog>

            <!-- 上传窗口 -->
            <el-dialog title="文件上传" :visible.sync="dialogUploadVisible" width="70%" @open="handleUploadDialogOpen" @close="handleUploadDialogClose">

                <div class="file-upload-dialog">
                    <div class="margin-bottom-20">
                        <el-select v-model="data.ossName" @change="handleChangeSelect" size="medium" placeholder="服务商" clearable style="width: 150px;margin-right: 10px;">
                            <el-option
                                    v-for="item in ossNameOptions"
                                    :key="item.key"
                                    :label="item.label"
                                    :value="item.key">
                            </el-option>
                        </el-select>
                        <el-select v-model="data.bucketName" placeholder="空间名" size="medium" clearable style="width: 150px;margin-right: 10px;">
                            <el-option
                                    v-for="item in bucketNameOptions"
                                    :key="item.key"
                                    :label="item.label"
                                    :value="item.key">
                            </el-option>
                        </el-select>
                        <el-input v-model="data.prefixName" placeholder="文件名前缀" size="medium" style="width: 180px"></el-input>
                    </div>
                    
                    <!-- 文件上传列表表格 -->
                    <el-table
                            v-if="files.length"
                            :data="files"
                            border fit
                            highlight-current-row
                            empty-text="-">
            
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" width="55" align="center"></el-table-column>
            
                        <el-table-column label="缩略图" align="center">
                            <template slot-scope="scope">
                            <img v-if="scope.row.thumb" :src="scope.row.thumb" width="40" height="auto" />
                            <span v-else>No Image</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="名称" width="350">
                            <template slot-scope="scope"> 
                                <div class="filename">
                                    {{ scope.row.name }}
                                </div>
                                <div class="progress" v-if="scope.row.active || scope.row.progress !== '0.00'">
                                    <el-progress :text-inside="true" :stroke-width="18" :status="scope.row.error?'exception':'success'" :percentage="parseFloat(scope.row.progress)"></el-progress>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="大小" align="center">
                            <template slot-scope="scope"> {{ scope.row.size | formatSize }}</template>
                        </el-table-column>
                        <el-table-column label="速度" align="center">
                            <template slot-scope="scope"> {{ scope.row.speed | formatSize }}</template>
                        </el-table-column>
                        <el-table-column label="状态" align="center">
                            <template slot-scope="scope">
                                <el-tag type="danger" v-if="scope.row.error">{{scope.row.error}}</el-tag>
                                <el-tag type="success" v-if="scope.row.success">成功</el-tag>
                                <el-tag type="primary" v-if="scope.row.active">上传中</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="380" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="medium" 
                                    :disabled="scope.row.active || scope.row.success || scope.row.error === 'compressing'"
                                    @click.prevent="scope.row.active || scope.row.success || scope.row.error === 'compressing' ? false :  onEditFileShow(scope.row)"
                                >编辑</el-button>
                                <el-button type="primary" size="medium" :disabled="!scope.row.active">取消</el-button>

                                <el-button type="primary" size="medium" v-if="scope.row.active">上传中</el-button>
                                <el-button type="primary" size="medium" v-else-if="scope.row.error && scope.row.error !== 'compressing' && $refs.upload.features.html5" @click.prevent="$refs.upload.update(scope.row, {active: true, error: '', progress: '0.00'})">重新上传</el-button>
                                <el-button type="primary" size="medium" v-else @click.prevent="uploadSingle(scope.row)">上传</el-button>
                                
                                <el-button type="danger" size="medium" @click.prevent="$refs.upload.remove(scope.row)">移除</el-button>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                    
                    <label v-if="!files.length" :for="name" class="drop-container">
                        <h4>将文件拖到此处，或<span>点击上传</span></h4>
                    </label>

                    <div class="upload-btn-group">
                        <file-upload
                            class="btn btn-primary dropdown-toggle"
                            :post-action="postAction"
                            :extensions="extensions"
                            :accept="accept"
                            :multiple="multiple"
                            :directory="directory"
                            :size="size || 0"
                            :thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
                            :headers="headers"
                            :data="data"
                            :drop="drop"
                            :drop-directory="dropDirectory"
                            :add-index="addIndex"
                            v-model="files"
                            @input-filter="inputFilter"
                            @input-file="inputFile"
                            ref="upload">
                        </file-upload>

                        <div class="upload-btn-group-flex">
                            <div class="flex-left">
                                <label :for="name" class="el-button el-button--primary el-button--medium"><i class="el-icon-document"></i> 添加文件</label>
                                <el-button type="primary" size="medium" icon="el-icon-circle-plus-outline" @click="onAddFolader">添加目录</el-button>
                                <el-button type="primary" size="medium" icon="el-icon-tickets" @click.prevent="addData.show = true">添加数据</el-button>
                                <el-button type="danger" size="medium" icon="el-icon-tickets" @click.prevent="clearFiles">清空</el-button>
                            </div>
                            <div class="flex-right">
                                <el-button type="primary" size="medium" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="upload">开始上传</el-button>
                                <el-button type="danger" size="medium" icon="el-icon-circle-plus" v-else @click.prevent="$refs.upload.active = false">停止上传</el-button>
                            </div>
                        </div>
                    </div>
                </div>

                

            </el-dialog>

            <el-dialog title="编辑" :visible.sync="editFile.show" width="50%" @close="handleEditImgDialogClose">
                <div class="edit-image">
                    <img :src="editFile.blob" ref="editImage" />
                </div>

                <div class="edit-image-tool">
                    <el-button type="primary" @click="editFile.cropper.rotate(-90)" title="cropper.crop()">旋转-90</el-button>
                    <el-button type="primary" @click="editFile.cropper.rotate(90)" title="cropper.crop()">旋转90</el-button>
                    <el-button type="primary" @click="editFile.cropper.crop()" title="cropper.crop()">裁剪</el-button>
                    <el-button type="primary" @click="editFile.cropper.clear()" title="cropper.clear()">清除</el-button>
                </div>
                
                <div slot="footer" class="dialog-footer">
                    <el-button @click.prevent="editFile.show = false">取 消</el-button>
                    <el-button type="primary" @click.prevent="onEditorFile">保 存</el-button>
                </div>
            </el-dialog>
		
		</div>    	
		<back-to-top></back-to-top>
    </div>
</template>

<script>
    import Cropper from 'cropperjs'
    import 'cropperjs/dist/cropper.min.css'
    import ImageCompressor from 'image-compressor'
    import FileUpload from 'vue-upload-component'
    import { created, updated, deleted, selectOne, selectList, selectPage, UPLOAD_URL, setConfig, findByOssName, selectListOssConfig } from '@/api/system/oss'
    import { getToken } from "@/libs/auth";
    import { ResultMessage } from '@/libs/response'
    import { isAuth } from "@/libs/auth";
    import BackToTop from "@/components/BackToTop/index";
    import valid from '@/libs/rules'
    import clip from '@/libs/clipboard'

    const ossNameOptions = [
        {label: '七牛云', key: 'qiniuyun'}, 
        {label: '阿里云', key: 'aliyun'}, 
        {label: '腾讯云', key: 'texgxunyun'}
    ]

    export default {
        name: 'Oss',
        components: {BackToTop, FileUpload},
        data() {
            let required = valid.required()
            return {
                list: null,
                total: null,
                listLoading: true,
                listQuery: {
                    page: 1,
                    limit: 10,
                    ossName: null,
                    bucketName: null,
                    fileName: null,
                    orderBy: 'ctime desc'
                },
                multipleSelection: [],
                dialogUploadVisible: false,
                form: {},
                ossNameOptions,         //服务商下拉选项
                bucketNameOptions: [],  //空间下拉选项
                ossBucketsObject: [],   //根据服务商名获取空间下拉数据

                //OSS配置
                dialogOssConfigVisible: false,
                configForm: {
                    ossName: 'qiniuyun'
                },
                configRules: {
                    accessKey: [required],
                    secretKey: [required],
                    bucketName: [required]
                },


                //上传配置
                files: [],
                accept: 'image/png,image/gif,image/jpeg,image/webp',
                extensions: 'gif,jpg,jpeg,png,webp',
                minSize: 1024,          //文件大小最小不能小于1K
                size: 1024 * 1024 * 10100, //文件最大不能大于10M
                multiple: true,
                directory: false,
                drop: true,
                dropDirectory: true,
                addIndex: false,
                thread: 3,
                name: 'file',
                postAction: UPLOAD_URL,
                headers: {
                    'Auth-Token': getToken()
                },
                data: {
                    ossName: null,
                    bucketName: null,
                    prefixName: null
                },
                autoCompress: 1024 * 1024 * 1024,  //文件压缩大小
                uploadAuto: false,
                isOption: false,

                addData: {
                    show: false,
                    name: '',
                    type: '',
                    content: '',
                },
                editFile: {
                    show: false,
                    name: '',
                }
            }
        },
        created() {
            this.getPage()
            this.getOssConfig()
        },
        watch: {
            'editFile.show'(newValue, oldValue) {
                // 关闭了 自动删除 error
                if (!newValue && oldValue) {
                    this.$refs.upload.update(this.editFile.id, { error: this.editFile.error || '' })
                }
                
                if (newValue) {
                    this.$nextTick(function () {
                    if (!this.$refs.editImage) {
                        return
                    }
                    let cropper = new Cropper(this.$refs.editImage, {
                        autoCrop: false,
                    })
                    this.editFile = {
                            ...this.editFile,
                            cropper
                        }
                    })
                }
            }
        },
        methods: {
            handleCopy(text, event) {
                clip(text, event)
            },
            handlerOpen(url) {
                window.open(url)
            },
            handleEditImgDialogClose() {
            },
        	authorize(auth) {
				return isAuth(auth) //按钮权限验证
            },
            handleFilter() {//条件过滤
                this.listQuery.page = 1
                this.getPage()
            },
            handleResetFilter() {//重置过滤条件
                this.cancel('filterForm')
                this.bucketNameOptions = []
                this.getPage()
            },
            handleChangeSelect(value) {
                let options = this.ossBucketsObject.filter((item, index, array) => {
                    return item.ossName == value
                })
                if(options.length) {
                    this.bucketNameOptions = options[0].options
                } else {
                    this.bucketNameOptions = []
                }

                this.data.bucketName = null
            },
            handleChangeRadio(label) {
                this.getByOssName()
            },
            handleDialogOpen() {
                this.getByOssName()
            },
            handleDialogClose() {//关闭窗口回调函数
                this.cancel('form')
            },
            handleUploadDialogOpen() {
                this.cancel('filterForm')
                this.bucketNameOptions = []

                this.handleChangeSelect(this.ossNameOptions[0].key)
                this.data.ossName = this.ossNameOptions[0].key
                this.data.bucketName = this.bucketNameOptions[0].key
            },
            handleUploadDialogClose() {
                this.cancel('filterForm')
                this.data = {
                    ossName: null,
                    bucketName: null,
                    prefixName: null
                }
                this.bucketNameOptions = []
                this.$refs.upload.clear()
                this.getPage()
            },
            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.listQuery.page = 1
                this.listQuery.limit = val
                this.getPage()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getPage()
            },
            handleUpload() {
                this.dialogUploadVisible = true
            },
            handlerOssConfig() {//添加数据窗口
                this.dialogOssConfigVisible = true
            },
            handleDelete(row) {//批量删除数据
                let ids = []
                if (row.id != undefined) {
                    ids.push(row.id)
                } else {
                    if (this.multipleSelection.length > 0) {
                        for (let item of this.multipleSelection) {
                            ids.push(item.id)
                        }
                    }
                }
                if (ids.length <= 0) {
                    this.$notify({
                        title: '提示', message: '请选择需要删除的记录',
                        type: 'warning', duration: 2000
                    })
                } else {
                    this.$confirm('确定要删除？', '提示', {
                        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
                    }).then(() => {
                       deleted({idList: ids}).then(response => {
                            if(ResultMessage(response)) {
                                this.getPage()
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '删除失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }).catch(() => {})
                }
            },
            getData(id) { //根据ID查询数据
                this.listLoading = true
                return selectOne(id).then(response => {
                    if(ResultMessage(response, false)) {
                        this.listLoading = false
                        return response
                    } else {
                        this.listLoading = false
                        return null
                    }
                }).catch(error => {
                    this.$notify({
                        title: '提示', message: '根据ID获取数据失败',
                        type: 'error', duration: 2000
                    })
                    this.listLoading = false
                })
            },
            getPage() {//查询分页列表
                this.listLoading = true
                selectPage(this.listQuery).then(response => {
                    if(ResultMessage(response, false)) {
                        this.list = response.data.data.list
                        this.total = parseInt(response.data.data.total)
                        this.listLoading = false
                    } else {
                        this.listLoading = false
                    }
                }).catch(error => {
                    this.listLoading = false
                    this.$notify({
                        title: '提示', message: '查询列表失败',
                        type: 'error', duration: 2000
                    })
                })
            },
            setOssConfig(formName) { //新增或修改OSS配置
                const set = this.$refs
                set[formName].validate((valid) => {
                    if (valid) {
                        setConfig(this.configForm).then(response => {
                        	if(ResultMessage(response)) {
                                this.handleResetFilter()
                            } else {
                                this.dialogOssConfigVisible = false
                            }
                        }).catch(error => {
                            this.$notify({
                                title: '提示', message: '添加失败',
                                type: 'error', duration: 2000
                            })
                        })
                    }
                })
            },
            getByOssName() { //根据服务商名查询
                findByOssName(this.configForm.ossName).then(response => {
                    if(response.data.status === 200) {
                        this.configForm = Object.assign({}, response.data.data)
                    } else {
                        this.configForm = Object.assign({}, {'ossName': this.configForm.ossName})
                    }
                }).catch(() => {})
            },
            getOssConfig() {
                selectListOssConfig().then(response => {
                    const datas = response.data.data

                    for(let item of datas) {
                        let options = []
                        let bucketNames = item.bucketName ? item.bucketName.split(','): []
                        for(let bitem of bucketNames) {
                            options.push({label: bitem, key: bitem})
                        }
                        this.ossBucketsObject.push({'ossName': item.ossName, 'options': options})
                    }
                })
            },
            cancel(formName) {
                this.dialogOssConfigVisible = false
                const set = this.$refs
                set[formName].resetFields()
                this.configForm = {
                    ossName: 'qiniuyun'
                },
                this.form = {
                }
            },


            //文件上传过滤
            inputFilter(newFile, oldFile, prevent) {
                if (newFile && !oldFile) {
                    // Before adding a file
                    // 添加文件前
                    // Filter system files or hide files
                    // 过滤系统文件 和隐藏文件
                    if (/(\/|^)(Thumbs\.db|desktop\.ini|\..+)$/.test(newFile.name)) {
                        return prevent()
                    }
                    // Filter php html js file
                    // 过滤 php html js 文件
                    if (/\.(php5?|html?|jsx?)$/i.test(newFile.name)) {
                        return prevent()
                    }
                    // Automatic compression
                    // 自动压缩
                    if (newFile.file && newFile.type.substr(0, 6) === 'image/' && this.autoCompress > 0 && this.autoCompress < newFile.size) {
                        newFile.error = 'compressing'
                        const imageCompressor = new ImageCompressor(null, {
                            convertSize: Infinity,
                            maxWidth: 512,
                            maxHeight: 512,
                        })
                        imageCompressor.compress(newFile.file).then((file) => {
                            this.$refs.upload.update(newFile, { error: '', file, size: file.size, type: file.type })
                        }).catch((err) => {
                            this.$refs.upload.update(newFile, { error: err.message || 'compress' })
                        })
                    }
                }
                if (newFile && (!oldFile || newFile.file !== oldFile.file)) {
                    // Create a blob field
                    // 创建 blob 字段
                    newFile.blob = ''
                    let URL = window.URL || window.webkitURL
                    if (URL && URL.createObjectURL) {
                        newFile.blob = URL.createObjectURL(newFile.file)
                    }
                    // Thumbnails
                    // 缩略图
                    newFile.thumb = ''
                    if (newFile.blob && newFile.type.substr(0, 6) === 'image/') {
                        newFile.thumb = newFile.blob
                    }
                }
            },
            upload() {
                if(this.data.ossName == null || this.data.ossName === '') {
                    this.$message({type: 'warning', title: '提示', message: '服务商不能为空'})
                } else if(this.data.bucketName == null || this.data.bucketName === '') {
                    this.$message({type: 'warning', title: '提示', message: '空间不能为空'})
                } else {
                    this.$refs.upload.active = true
                }
            },
            uploadSingle(row) {
                let flag = false
                if(this.data.ossName == null || this.data.ossName === '') {
                    this.$message({type: 'warning', title: '提示', message: '服务商不能为空'})
                } else if(this.data.bucketName == null || this.data.bucketName === '') {
                    this.$message({type: 'warning', title: '提示', message: '空间不能为空'})
                } else {
                    if(row.success || row.error === 'compressing') {
                        return false
                    } else {
                        this.$refs.upload.update(row, {active: true})
                    }
                }
            },
            // 添加，修改，删除文件监听
            inputFile(newFile, oldFile) {
                if (newFile && oldFile) {
                    // update
                    if (newFile.active && !oldFile.active) {
                        // beforeSend
                        // 限定最小字节
                        if (newFile.size >= 0 && this.minSize > 0 && newFile.size < this.minSize) {
                            this.$refs.upload.update(newFile, { error: '文件不能小于1k' })
                        }
                    }
                    if (newFile.progress !== oldFile.progress) {
                        // progress
                    }
                    if (newFile.error && !oldFile.error) {
                        // error
                        if(newFile.error === 'abort') {
                            this.$refs.upload.update(newFile, {error: '中止'})
                        }
                    }
                    if (newFile.success && !oldFile.success) {
                        // success
                    }
                }
                if (!newFile && oldFile) {
                    // remove
                    if (oldFile.success && oldFile.response.id) {
                    // $.ajax({
                    //   type: 'DELETE',
                    //   url: '/upload/delete?id=' + oldFile.response.id,
                    // })
                    }
                }
                // Automatically activate upload
                if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
                    if (this.uploadAuto && !this.$refs.upload.active) {
                        this.$refs.upload.active = true
                    }
                }
            },
            clearFiles() {
                this.$refs.upload.clear()
            },
            alert(msg) {
                this.$message({type: 'warning', title: '提示', message: msg})
            },
            onEditFileShow(file) {
                this.editFile = { ...file, show: true }
                this.$refs.upload.update(file, { error: 'edit' })
            },
            onEditorFile() {
                if (!this.$refs.upload.features.html5) {
                    this.alert('您的浏览器不支持该操作')
                    this.editFile.show = false
                    return
                }
                let data = {
                    name: this.editFile.name,
                }
                if (this.editFile.cropper) {
                    let binStr = atob(this.editFile.cropper.getCroppedCanvas().toDataURL(this.editFile.type).split(',')[1])
                    let arr = new Uint8Array(binStr.length)
                    for (let i = 0; i < binStr.length; i++) {
                        arr[i] = binStr.charCodeAt(i)
                    }
                    data.file = new File([arr], data.name, { type: this.editFile.type })
                    data.size = data.file.size
                }
                this.$refs.upload.update(this.editFile.id, data)
                this.editFile.error = ''
                this.editFile.show = false
            },
            // 添加目录
            onAddFolader() {
                if (!this.$refs.upload.features.directory) {
                    this.alert('您的浏览器不支持该操作')
                    return
                }
                let input = this.$refs.upload.$el.querySelector('input')
                input.directory = true
                input.webkitdirectory = true
                this.directory = true
                input.onclick = null
                input.click()
                input.onclick = (e) => {
                    this.directory = false
                    input.directory = false
                    input.webkitdirectory = false
                }
            },
            //添加数据
            onAddData() {
                this.addData.show = false
                if (!this.$refs.upload.features.html5) {
                    this.alert('您的浏览器不支持该操作')
                    return
                }
                let file = new window.File([this.addData.content], this.addData.name, {
                    type: this.addData.type,
                })
                this.$refs.upload.add(file)
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .file-upload-dialog{
        .drop-container{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 200px;
            border: 3px dashed #d9d9d9;
            border-radius: 6px;
            h4{
                font-weight: normal;
                span{
                    color: rgb(64, 158, 255);
                }
            }
        }

        .upload-btn-group{
            margin-top: 30px;
            .upload-btn-group-flex{
                display: flex;
                justify-content: space-between;
            }
        }
    }

    .edit-image{
        border: 1px solid red;
        width: 100%;
        height: 200px;

        img{
            border:1px solid blue;
            max-width: 100%;
        }
    }
    
</style>